<template>
  <!-- v-container用于创建视点在中心的页面，而fluid属性可将其宽度拓展到充满容器 -->
  <v-app>
    <div class="login-container" @keyup.enter="onLogin">
      <div class="panel-wrapper">
        <v-layout pb-5>
          <v-flex class="headline white--text">
            帅帅跨境
          </v-flex>
        </v-layout>
        <v-layout column justify-center class="panel px-4 elevation-2">
          <v-flex md9>
            <!-- <v-form action="login.jsp" method="post" id="loginForm"> -->
              <v-layout row wrap>
                <v-flex md12>
                  <v-text-field
                    outline
                    color="secondary"
                    prepend-inner-icon="account_circle"
                    label="账号"
                    v-model="username"
                    type="text"
                    name="username"
                    hide-details
                  ></v-text-field>
                </v-flex>
                <v-flex md12 mt-3>
                  <v-text-field
                    outline
                    color="secondary"
                    prepend-inner-icon="lock"
                    label="密码"
                    v-model="password"
                    type="password"
                    name="password"
                    hide-details
                  ></v-text-field>
                </v-flex>
                <v-flex md12 text-xs-center mt-3>
                  <v-btn @click="onLogin" round dark color="secondary" class="login-button">
                    <span class="title"> 登录 </span>
                  </v-btn>
                </v-flex>

                <v-flex md12 text-xs-right>
                  <span>忘记密码</span>
                </v-flex>

              </v-layout>
            <!-- </v-form> -->
          </v-flex>
        </v-layout>
      </div>
    </div>

    <v-footer color="secondary" app>
      <div class="white--text pl-4">&copy; {{new Date().getFullYear()}}</div>
    </v-footer>
  </v-app>
</template>

<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import Cookie from 'js-cookie';
import * as api from "@/api";
declare const $Vue: Vue;

@Component
export default class Login extends Vue {

  private username: string = "";
  private password: string = "";

  protected mounted() {
    // this.testData()
  }

  private testData() {
    this.username = '123456789'
    this.password = 'qwer1234'
  }

  private async onLogin() {
    if (this.username === "") {
      return $Vue.$emit("snackbar", {
        message: "请填写用户名"
      });
      alert("请填写用户名")
    }
    if (this.password === "") {
      return $Vue.$emit("snackbar", {
        message: "请填写密码"
      });
      alert("请填写密码")
    }
    
    const params = {
      username: this.username,
      password: this.password,
      userType: 0,
    };

    const { data } = await api.Login.handleLogin.r(params);
      console.log('login', data);

    if (data.result === 0) {
      let $data = data.data;
      Cookie.set('console_token', $data.userVo.token);
      Cookie.set('userId', $data.userVo.userId.toString());
      localStorage.setItem('routeList', JSON.stringify($data.tree));
      this.$emit('login', {
        newPath: 'Home/ActivityList',
        $data,
      });
    } else {
      $Vue.$emit("snackbar", {
        message: data.message,
      });
      alert(data.message)
    }
  }
}
</script>


<style lang="less">
.login-container {
  background-size: 100% 100%!important;
  background-position-y: 80%!important;
  background-repeat: no-repeat!important;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-image: url(../../assets/images/background.png)!important;

  .panel-wrapper {
    // flex-basis: 26%;
    width: 24rem;
  }
  .panel {
    width: 100%;
    height: 20rem;
    border-radius: 2rem;
    background-color: #ffffff88;
    .login-title {
      line-height: 2rem;
    }
  }

  .login-button {
    width: 12rem;
    height: 3rem;
  }
}
</style>

